import * as React from 'react';
import { observer } from 'mobx-react';
import { loadSpread, releaseSpread } from '../../../utils/loadSpread';
import FilterComponent from './filter/FilterComponent';
import { Spin} from 'antd';

@observer
export default class Workbook extends React.Component {
    filterDiv = null;
    render() {
        const { store, height } = this.props;
        const { excelStore } = store;
        
        // if (excelStore.loading) {
        //     return <div className="h100" style={{ textAlign: 'center', paddingTop: '300px'}}><Spin size="large" /></div>
        // }
        return (
            <div className="edc-workbook" >
            {excelStore.loading && <div className="h100" style={{ textAlign: 'center', paddingTop: '300px'}}><Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@p2nczf`} size="large" /></div>}
                <div style={{ height , overflow: 'hidden'}}>
                    <div className="workbook-container" ref={ref => this.container = ref} style={{ height: '100%',width: '100%' }} />
                </div>
                {/*  <div className="custom-filter-dropdown-edc" 
                    style={{
                        display: store.excelStore.filterVisible ? "" : "none",
                        position:"fixed", left : store.excelStore.selectLeft, top:store.excelStore.selectTop
                    }} bulr={store.excelStore.hide}>
                    <WeaSelect
                        multiple
                        options={store.excelStore.options || []}
                        value={store.excelStore.selectValue}
                        viewAttr={2}

                        onChange={v => {
                            store.excelStore.changeSelectValue(v)
                        }}
                    />
                    <Button type="primary"
                        onClick={store.excelStore.onFilter}
                        style={{ width: 90 }}>过滤</Button>
                </div> */}
                {<FilterComponent ecId={`${this && this.props && this.props.ecId || ''}_FilterComponent@siyk2y`}
                    visible={excelStore.filterVisible}
                    top={excelStore.filterTop}
                    left={excelStore.filterLeft}
                    width={excelStore.filterWidth}
                    options={excelStore.filterOptions}
                    loading={excelStore.filterLoading}
                    filterValue={excelStore.filterValue}
                    onChange={excelStore.onChange}
                    onFilter={excelStore.onFilter}
                    sortType={excelStore.sortType}
                    changeSort={excelStore.changeSort}
                    quickSearch={excelStore.quickSearch}
                    quickSearchValue={excelStore.quickSearchValue}
                    indeterminate={excelStore.indeterminate}
                    onCheckAllChange={excelStore.onCheckAllChange}
                    checkAll={excelStore.checkAll}
                    changeSearch={excelStore.changeSearch}
                    isSearch={excelStore.isSearch}
                    isShowAdSearch={excelStore.isShowAdSearch}
                ></FilterComponent>}
            </div >
        )
    }

    componentDidMount() {
        this.t = loadSpread(this.loadWorkbook);
    }
    componentWillUnmount() {
        releaseSpread(this.t);
        if (this.filterDiv) {
            ReactDOM.unmountComponentAtNode(this.filterDiv);
        }
    }
    loadWorkbook = () => {
        const { store } = this.props;
        
        if (this.container) {
            const workbook = new GC.Spread.Sheets.Workbook(this.container);
            store.excelStore.initWorkbook(workbook);
        }
    }

}